<script setup>
import { getPersonWorkHours } from '@/api/visual/index'
import { formatHeaderData } from '@/utils/globalMethod'

const key = ref(1)

const config = ref({
  header: ['人员', '开机次数', '累计工时'],
  data: [],
  align: ['center', 'center', 'center'],
  headerBGC: 'rgba(0,0,0,0)',
  oddRowBGC: 'rgba(0,0,0,0)',
  evenRowBGC: 'rgba(0,0,0,0)'
})

const loadData = async () => {
  const { data: workTime } = await getPersonWorkHours()
  config.value.data = workTime.map(item => {
    let scxs
    if (item.scxs > 10) {
      item.scxs = item.scxs.toFixed(2)
      scxs = formatHeaderData(item.scxs, 'red')
    } else {
      scxs = item.scxs.toFixed(2)
    }
    return [item.PersonName, item.kgcs, scxs]
  })
}

const keyResize = () => {
  nextTick(() => {
    setTimeout(() => {
      key.value++
    }, 100)
  })
}

onMounted(loadData)
onMounted(() => {
  window.addEventListener('resize', keyResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', keyResize)
})
</script>

<template>
  <div class="ps_w_h_100 productionBoard6">
    <div class="board-title">人员开工详情</div>

    <ps-scroll-data :config="config" :key="key" />
  </div>
</template>

<style scoped lang="scss">
.productionBoard6 {
  padding: 10px;
  height: 90%;
  overflow: hidden;
}
</style>
